<template>
	<div class="bigDiv">
		<el-form :model="queryParams" :inline="true" label-width="88px" class="demo-dynamic">
			<el-form-item label="商品名" prop="goodsName">
				<el-input v-model="queryParams.goodsName" placeholder="商品名" clearable size="small"
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="sku" prop="sku">
				<el-input v-model="queryParams.sku" placeholder="sku" clearable size="small"
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="供应商" prop="supplierId">
				<el-select size="small" v-model="queryParams.supplierId" placeholder="请选择一个电商" filterable>
					<el-option v-for="item in supplierList" :key="item.id" :label="item.orgNameZh" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="cyan" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-table v-loading="loading" :data="list">
			<el-table-column label="供应商" align="center" prop="supplierName" />
			<el-table-column label="商品名称" align="center" prop="goodsName" />
			<el-table-column label="sku" align="center" prop="sku" />
			<el-table-column label="品牌" align="center" prop="brandName" />
			<el-table-column label="创建时间" align="center" prop="createTime" />
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-popconfirm confirm-button-text='下架' cancel-button-text='取消' icon="el-icon-info" icon-color="red"
						title="确定下架商品？" @confirm="handleDown(scope.row)">
						<el-button size="mini" type="text" slot="reference" icon="el-icon-delete">下架
						</el-button>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>


		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
			@pagination="getList" />

	</div>
</template>

<script>
	import { goodsListAll } from "@/api/activiti/goods";
	import { supplierList } from '@/api/supplierActivity/definition'
	export default {
		name: "goodsItemAll",
		data() {
			return {
				loading: false,
				list: [],
				supplierList: [],
				total: 0,
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					goodsName: undefined,
					sku: undefined,
					supplierId: undefined,
				}
			}
		},
		mounted() {
			this.getList();
			this.getSupplierList();
		},
		methods: {
			getList() {
				this.loading = true;
				goodsListAll(this.queryParams).then(res => {
					this.list = res.rows
					this.total = res.total
					this.loading = false
				})
			},
			getSupplierList() {
				supplierList().then(res => {
					this.supplierList = res;
				})
			},
			handleQuery() {
				this.getList();
			},
			resetQuery() {
				this.queryParams.goodsName = undefined;
				this.queryParams.supplierId = undefined;
			},
			// 下架操作
			handleDown(row) {
				console.log(row)
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep {
		.el-table .el-table__cell{
			padding:0px !important;
		}
	}
	.el-form-item{
		margin-bottom:0px;
	}
</style>
